<template>
    <div class="home viewer">
        <vc-viewer ref="viewerRef" :info-box="false" :show-credit="false" :selectionIndicator="true" :scene3DOnly="true"
            @ready="onViewerReady" @leftClick="onLeftClick">
            <vc-layer-imagery>
                <!-- 百度地图-午夜蓝 -->
                <!-- <vc-imagery-provider-baidu mapStyle="midnight" :projection-transforms="{ from: 'BD09', to: 'WGS84' }">
        </vc-imagery-provider-baidu> -->
                <vc-imagery-provider-tencent mapStyle="vector" styleId="4"
                    :projection-transforms="{ from: 'GCJ02', to: 'WGS84' }"
                    ref="provider"></vc-imagery-provider-tencent>
            </vc-layer-imagery>
            <!-- 动态墙 -->
            <dynamic-wall
                :pos-arr="[106.178781, 38.457216, 106.177536, 38.438226, 106.205002, 38.437117, 106.205903, 38.456846, 106.178781, 38.457216]" />
            <!-- 点聚合 -->
            <point-aggregate />
        </vc-viewer>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { VcReadyObject } from 'vue-cesium/es/utils/types'
import DynamicWall from '@/components/DynamicWall/index.vue';
import PointAggregate from '@/components/PointAggregate/index.vue';

let viewer = ref(null)

const onViewerReady = (readyObj: VcReadyObject) => {
    viewer.value = readyObj.viewer
}

// 鼠标左键单击事件
const onLeftClick = (e: any) => {
    if (!viewer.value) {
        return;
    }
    const feature = viewer.value.scene.pick(e.position);
    // 触发 properties 上定义的 onClick 事件
    if (feature?.id?.properties.onClick) {
        feature.id.properties.onClick._value();
    }
}

</script>

<style scoped>
.viewer {
    height: 100vh;
    width: 100%;
}
</style>
